<template>
  <div class="login">
    <!-- 头部区域 -->
    <van-nav-bar title="登录" />
    <!-- 表单区域  error-message="手机号格式错误" 错误提示的属性
    label 左侧展示的文本
    -----作业 自行组件库中使用一下 form组件
    error-message的值如果为'', 错误提示文本不会显示
    -->
    <van-cell-group>
      <van-field
        v-model="mobile"
        required
        label="手机号"
        placeholder="请输入手机号"
        :error-message="errorMobile_text"
        @input="validate"
      />
      <van-field
        v-model="code"
        required
        label="验证码"
        placeholder="请输入验证码"
        :error-message="errorCode_text"
        @input="validate"
      />
    </van-cell-group>
    <!-- 登录按钮 -->
    <div class="login-btn">
      <van-button type="info" @click="login">登录</van-button>
    </div>
    <hr>
    <van-button type="primary" @click="getUserInfo">获取个人信息</van-button>
    <van-button type="primary" @click="getUserFansList">获取粉丝列表</van-button>
    <!--  form 表单组件做合法值校验
      :rules 属性是加规则的 [{}, {pattern: 正则表达式}]
     -->
    <!-- <van-form @submit="onSubmit">
      <van-field
        v-model="mobile"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[
          { required: true, message: '请填写手机号' },
          { pattern:/^1[3-9]\d{9}$/, message: '手机号不合法', trigger: 'onChange'}]"
      />
      <van-field
        v-model="code"
        type="password"
        name="验证码"
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form> -->
  </div>
</template>

<script>
import { reqLogin, reqGetUserInfo, reqGetUserFans } from '@/api/user'
export default {
  name: 'Login',
  data() {
    return {
      mobile: '13800000002',
      code: '246810',
      errorMobile_text: '', // 手机号的提示文本
      errorCode_text: '' // 验证码的提示文本
    }
  },
  methods: {
    validate() {
      // 校验工作
      // 1. 空值校验 手机号的空值校验
      if (this.mobile.trim().length === 0) {
        this.errorMobile_text = '手机号不能为空'
        return false
      }
      // 手机号合法性的校验  正则
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        this.errorMobile_text = '请输入合法的11位手机号'
        return false
      }
      // 手机号如果校验通过,将错误提示置空
      this.errorMobile_text = ''
      // 验证码的空值校验
      if (!this.code.trim().length) {
        this.errorCode_text = '验证码不能为空'
        return false
      }
      // 验证码的合法性
      if (!/^\d{6}$/.test(this.code)) {
        this.errorCode_text = '请输入合法的6位验证码'
        return false
      }
      // 验证码如果校验通过,将错误提示置空
      this.errorCode_text = ''
      return true
    },
    // 登录功能
    async login() {
      //  调用一个函数做一个校验
      // const res = this.validate()
      // console.log(res)
      if (!this.validate()) return
      this.$toast.loading({
        message: '登录中...', // 加载提示文本
        overlay: true, // 灰色遮罩
        forbidClick: true, // 禁止背景点击
        duration: 0 // 展示时长设置为0 表示一直显示
      })
      // 发送请求
      // this.$http({
      //   method: 'post',
      //   url: '/v1_0/authorizations',
      //   data: {
      //     mobile: this.mobile,
      //     code: this.code
      //   }
      // }).then(res => {
      //   console.log(res)
      //   // toast组件采用的是单例模式. 下一个toast会将上一个覆盖
      //   this.$toast.success('登录成功')
      // })
      const { data: { data }} = await reqLogin({ mobile: this.mobile, code: this.code })
      // 提交mutation存储用户token信息
      this.$store.commit('user/setTokenInfo', data)
      // 单例模式
      this.$toast.success('登录成功')
      // 登录成功后跳转到 / 编程式导航
      console.log(this.$route)
      // this.$router.push('/')
      const backto = this.$route.query.backto
      // 判断路由地址有无要去的页面的信息,有就跳转,没有就去首页
      if (backto) {
        // this.$router.push(backto)
        this.$router.back() // back不会做历史记录存储
      } else {
        this.$router.push('/')
      }
    },
    // 测试获取个人信息
    async getUserInfo() {
      const res = await reqGetUserInfo()
      console.log(res)
    },
    // 测试用户粉丝列表
    async getUserFansList() {
      const res = await reqGetUserFans()
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-btn{
  padding: 20px;
  .van-button{
    width: 100%;
    border-radius: 5px;
  }
}
</style>
